<template>
    <div class="SearchIndexSearchbar">
        <van-icon name="arrow-left" size="30px" color="#777" @click="handleBack" class="backBtn"/>
        <div class="rigthContent">
            <van-search v-model="value" placeholder="请输入车牌或姓名搜索" show-action @search="onClickButton" ref="searchBox">
                <template #action>
                    <van-button @click="onClickButton" type="primary">搜索</van-button>                
                </template>
            </van-search>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {onActivated, onMounted, ref, watch} from 'vue'
import { useRoute, useRouter } from 'vue-router';

const props = defineProps({
    value:String
})

const value = ref();
const searchBox = ref()
const router = useRouter();
const emite = defineEmits(['search'])
const route = useRoute();

watch(()=>props.value,()=>{
    value.value = props.value
})

const onClickButton = ()=>{
    emite('search',value.value)
}

const handleBack = ()=>{
    router.back();
}



onMounted(()=>{
    
    searchBox.value.focus();
})

</script>
<style lang="less" scoped >
.SearchIndexSearchbar{
    display: flex;
    align-items: center;
    background: #fff;

    .rigthContent{
        flex-grow: 1;
        margin-right: 10px;
    }

    .backBtn{
        margin-left: 10px;
        margin-right: 10px;
    }
}

</style>
<style>
.SearchIndexSearchbar .van-search__content{
    border-radius: 0;
    border:1px solid #004e9b;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.SearchIndexSearchbar .van-search__field{
    height: 42px;
}

.SearchIndexSearchbar  .van-search__action{
    padding-left: 0;
}

.SearchIndexSearchbar .van-search__action .van-button{
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.SearchIndexSearchbar .van-search{
    padding-left:0;
}
</style>